<template>
    <div ref="goodsItem" class="goodsItem" :style="{ backgroundImage: `url(${props.item.pcListImg})` }"
        @mouseenter="setImgBc" @mouseleave="setImgBcLeave" @click="toDetail">
        <img class="pcListImg" :src="props.item.pcListImg" alt="图片加载失败">
        <img class="sceneImg" :src="props.item.sceneImg" alt="图片加载失败">
        <!-- <img class="goodsImg" :src="props.item.img" alt="图片加载失败"> -->
        <div class="goodsInfo">
            <div class="msg">
                <div>{{ props.item.name }}</div>
                <!-- 过长字符省略 -->
                <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;width: 200px;">{{
                    props.item.subtitle }}
                </div>
            </div>
            <div class="price">￥{{ props.item.price }}</div>
        </div>
    </div>
    <!-- 废弃悬浮切换图片方案
     <div v-show="ifOn" class="goodsItem" :style="{ backgroundImage: `url(${props.item.sceneImg})` }"
        @mouseover="setImgBc" @mouseleave="setImgBcLeave">
        <div class="goodsInfo">
            <div class="msg">
                <div>{{ props.item.name }}</div>
                <div>{{ props.item.subtitle }}</div>
            </div>
            <div class="price">￥{{ props.item.price }}</div>
        </div>
    </div> -->

</template>

<script setup>
import { ref, inject } from 'vue'
const itemDetailTemp = ref({
    "img": "https://static.mcake.com//uploads/2024/05/10/30743c70d2a80129191e74c53c273fc6cf535e9d.jpg",
    "sku": "n0301",
    "spec": "1磅",
    "name": "蓝莓轻乳拿破仑",
    "french": "Napoléon aux myrtilles",
    "title": "蓝莓轻乳拿破仑",
    "subtitle": "Napoléon aux myrtilles",
    "price": "198.00",
    "amount": "198.00",
    "url": "/product/n0301",
    "pcListImg": "https://static.mcake.com//uploads/2024/05/10/30743c70d2a80129191e74c53c273fc6cf535e9d.jpg",
    "sceneImg": "https://static.mcake.com//uploads/2024/04/03/179b591e17ff851defe8d9dd8cd0782b89e6f02c.jpg"
})
const props = defineProps({
    item: Object,
    default: () => { }
})
const { detailInf, updateDetail } = inject('detailInf')
const toDetail = () => {
    updateDetail({ id: 2 })
}

// 监听鼠标悬浮
// 废弃悬浮切换图片方案
/*const bcImgTemp = ref(props.item.img)
const ifOn = ref(false)
 const setImgBc = () => {
    ifOn.value = true
    bcImgTemp.value = props.item.sceneImg
    // setImg(bcImgTemp.value)
}
const setImgBcLeave = () => {
    ifOn.value = false
    bcImgTemp.value = props.item.img
    // setImg(bcImgTemp.value)
}

const goodsItem = ref(null)
//通过ref改变背景图片
const setImg = (url) => {
    goodsItem.value.style.backgroundImage = `url(${url})`
} */
</script>

<style scoped lang="scss">
.goodsItem {
    position: relative;
    width: 100%;
    min-width: 300px;
    height: 350px;
    box-sizing: border-box;
    border-radius: 3px;
    cursor: pointer;
    background-color: #f3f3f3;
    // box-shadow: inset 10px 20px 3px #f8f8f8;
    box-sizing: border-box;
    background: url('@/assets/loading.png') center center no-repeat;
    background-size: 100% 100%;
    overflow: hidden;

    // 更好的触发切换
    &:hover .pcListImg {
        opacity: 0;
    }


    .pcListImg {
        transition: all 0.5s ease-in-out;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 2;
    }

    .sceneImg {
        height: 100%;
        width: 100%;
        position: absolute;
    }

    .goodsInfo {
        z-index: 3;
        font-size: 20px;
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;

        .price {
            position: absolute;
            bottom: 10px;
            right: 20px;
        }
    }
}
</style>